import React from 'react'
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
import { QuestionCheckboxStatPropsType } from './interface'

const StatComponent: React.FC<QuestionCheckboxStatPropsType> = ({ stat }) => {
  return (
    <div style={{ width: '300px', height: '400px' }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          width={400}
          height={300}
          data={stat}
          margin={{ top: 5, right: 30, left: 0, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3"></CartesianGrid>
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          {/* legend */}
          <Bar dataKey="count" fill="#8884d8"></Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}

export default StatComponent
